<template>
	<view class="bigbox">
		<view class="status">
			订单已取消
		</view>
		<view class="health">
			<view class="user">小二 15809282910</view>
			<text class="healthinto"> 体检机构: 【慈铭】广州体育中心体检中心</text>
			<text class="healthinto">体检时间:   2021-04-12</text>
			<text class="healthinto">预约单号:   1009</text>
		</view>
		<view class="ordercompose">
			<view class="orderid">订单号：2343223</view>
			<view class="ordercomposeinto">
				<view class="compose">老年人体检套餐豪华版（女）</view>
				<view class="price">￥59</view>
			</view>
			<view class="type">
				<view class="item">脑部CT</view>
				<view class="price">￥68</view>
			</view>
			<view class="type">
				<view class="item">心电图</view>
				<view class="price">￥49</view>
			</view>
			<view class="total-box">
					<view class="total">合计</view>
					<view class="price2">￥176</view>
				</view>
			
		</view>
		<view class="ordercompose">
			<view class="orderid">订单号：2343255</view>
			<view class="type">
				<view class="item">脑部CT</view>
				<view class="price">￥68</view>
			</view>
			<view class="total-box">
				<view class="total">合计</view>
				<view class="price2">￥68</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.bigbox {
		width: 750rpx;
		height: 100%;
		background-color: #e8ecee;
	}

	.status {
		padding-left: 20rpx;
		margin-left: 25rpx;
		margin-bottom: 20rpx;
		width: 700rpx;
		height: 50rpx;
		font-size: 30rpx;
		font-weight: bolder;
		background-color: #fff;
	}

	.health {
		padding-left: 20rpx;
		margin-left: 25rpx;
		width: 700rpx;
		height: 340rpx;
		background-color: #fff;
	}

	.user {
		width: 700rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bolder;
	}

	text {
		display: block;
	}

	.healthinto {
		width: 700rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.ordercompose {
		padding-left: 20rpx;
		width: 700rpx;
		margin-left: 25rpx;
		margin-top: 50rpx;
		background-color: #fff;
	}

	.orderid {
		width: 700rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}
	.ordercomposeinto{
		width: 700rpx;
	    height: 100rpx; 
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #f1f1f1;
	}
	.compose {
		width: 500rpx;
		height: 100rpx;
	}

	.price {
		width: 120rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.type {
		display: flex;
		justify-content: space-between;
		width: 700rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.item {
		width: 400rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.total-box {
		display: flex;
		justify-content: space-between;
		width: 700rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.total {
		width: 400rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: tomato;
	}

	.price2 {
		width: 120rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: tomato;
	}

	
</style>
